import React,{useState} from 'react'
import {useSelector,useDispatch} from "react-redux"
import * as action from "../action/index"
import {useEffect} from "react"
function App() {
  // 在组件中，要想修改仓库中的数据，react-redux为我们提供了一个hooks，叫做useDispatch
  let dispatch = useDispatch()
  let [filerArr,setFilterArr] = useState([
    "连载","完结"
  ])
  let [filerArr1,setFilterArr1] = useState([
    "3天","7天"
  ])
  let [lian,setLian] = useState("")
  let [date,setDate] = useState(0)
  let store = useSelector((state)=>{
        console.log(state);
        return {
            ...state.appreducer

        }
  })
  useEffect(()=>{
      
     dispatch(action.getlist()) 
  },[])
  let fn = ()=> { // 要想修改仓库中的数据，通过dispacth来触发一个action
    dispatch(action.setname("wangwu"))
  }
  let searchfn = ()=>{
    console.log(lian,date);
    dispatch(action.searchfn({lian,date}))
  }
  return (
    <div>
         {
           filerArr.map((item,index)=>{
             return <span key={index} style={{marginLeft:"30px"}} onClick={()=>setLian(item)}>{item}</span>
           })
         }
         <div>
            {
              
              filerArr1.map((item,index)=>{
                return <span key={index}  style={{marginLeft:"30px"}} onClick={()=>setDate(item)}>{item}</span>
              })
            }
         </div>
         <div>
           <button onClick={searchfn}>搜索</button> <button onClick={()=>  dispatch(action.getlist()) }>重置</button>
         </div>
         <hr />
        
         {
             store.arr && store.arr.length ?   store.arr.map((item,index)=>{
                return <div key={index}>{item.name}</div>
             }):""
         }
    </div>
  )
}

export default App